<template>
  <su-popup
    :show="show"
    type="bottom"
    round="20"
    @close="emits('close')"
    showClose
    backgroundColor="#f2f2f2"
  >
    <view class="model-box ss-p-x-20">
      <view class="title ss-m-t-16 ss-m-l-20 ss-flex">邀请码</view>
      <input class="input-box" type="text" style="border: solid 1px ;" v-model="state.yaoqingmacode" placeholder="请输入邀请码" />
    </view>
    <view class="modal-footer ss-flex">
      <button class="confirm-btn ss-reset-button" @click="onConfirm">确认</button>
    </view>
  </su-popup>
</template>

<script setup>
import { reactive, computed } from 'vue';
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});
const state = reactive({
    yaoqingmacode: '',
  });
const emits = defineEmits(['confirm', 'close']);
const onConfirm = () => {
  // 假设您想发送邀请码作为确认事件的一部分
  console.log(state.yaoqingmacode)
  emits('confirm', state.yaoqingmacode);
};
</script>

<style lang="scss" scoped>
.model-box {
  height: 60vh;
}
.title {
  font-size: 36rpx;
  height: 80rpx;
  font-weight: bold;
  color: #333333;
}
.modal-footer {
  width: 100%;
  height: 120rpx;
  background: #fff;
}
.confirm-btn {
  width: 710rpx;
  margin: 0 20rpx;
  height: 80rpx;
  background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
  border-radius: 40rpx;
  color: #fff;
}
.input-box {
  height: 80rpx;
  border-radius: 10rpx;
  padding: 10rpx 20rpx;
}

:deep(input) {
  .uni-input-wrapper {
    width: 100%;
  }
}
</style>
